<template>
  <div>
    <el-table :data="studentList" border style="width: 100%">
      <!-- 学号列 -->
      <el-table-column
        prop="studentId" 
        label="学号"
        width="120"
        align="center"
      ></el-table-column>

      <!-- 姓名列 -->
      <el-table-column
        prop="name"
        label="姓名"
        width="100"
        align="center"
      ></el-table-column>

      <!-- 成绩信息 -->
      <el-table-column label="成绩信息" align="center">
        <el-table-column 
          prop="chinese" 
          label="语文" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'chinese' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="math" 
          label="数学" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'math' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="english" 
          label="英语" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'english' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="politics" 
          label="政治" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'politics' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="history" 
          label="历史" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'history' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="geography" 
          label="地理" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'geography' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="physics" 
          label="物理" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'physics' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="chemistry" 
          label="化学" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'chemistry' ? 'highlight-cell' : ''"
        ></el-table-column>
        <el-table-column 
          prop="biology" 
          label="生物" 
          width="80" 
          align="center"
          :formatter="formatScore"
          :class-name="teacherSubject === 'biology' ? 'highlight-cell' : ''"
        ></el-table-column>
      </el-table-column>

      <!-- 学生档案 -->
      <el-table-column
        prop="profile"
        label="学生档案"
        width="300"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <!-- 操作列 -->
      <el-table-column
        label="操作"
        width="180"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small"
            @click="viewAnalysis(scope.row)"
          >
            查看学情
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="handleAction(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: "StudentList",
  props: {
    studentList: {
      type: Array,
      required: true,
    },
    teacherSubject: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
    // 格式化成绩，保留一位小数
    formatScore(row, column) {
      const score = row[column.property];
      if (score === null || score === undefined || isNaN(score)) {
        return '0.0';
      }
      return Number(score).toFixed(1);
    },
    viewAnalysis(student) {
      console.log("查看学情:", student);
      console.log("学生ID:", student.studentId); // 记录学生ID
      console.log("教师学科:", this.teacherSubject); // 记录当前教师学科
      
      this.$router.push({ 
        name: 'PerLearnCase', 
        params: { 
          studentId: student.studentId || student.id,
          studentName: student.name,
          studentClass: student.className,
          teacherSubject: this.teacherSubject // 传递教师学科
        } 
      });
    },
    handleAction(student) {
      console.log("修改:", student);
    }
  },
};
</script>

<style scoped>
/* 表格样式 */
.el-table th {
  background-color: #6db6ea; 
  color: #1b4380; /* 表头文字颜色 */
  font-weight: bold;
  text-align: center;
}
.el-table td {
  text-align: center;
}

/* 高亮显示的单元格样式 */
:deep(.highlight-cell) {
  background-color: #ffefc6 !important;
  font-weight: bold;
}

/* 按钮样式 */
.el-button {
  font-size: 14px;
}
</style>